<template>
  <header>
    <div class="header-container">
      <div class="logo" @click="goToHomePage">
        <h1 class="logo--h1">享来享去</h1>
        <h4 class="logo--h4">新能源商用车服务平台</h4>
      </div>
      <!--<ul class="nav">-->
      <!--<li class="nav-item">-->
      <!--<nuxt-link to="/">首页</nuxt-link>-->
      <!--</li>-->
      <!--<li class="nav-item" @mouseenter="jump">平台服务-->
      <!--</li>-->
      <!--<li class="nav-item">我的业务</li>-->
      <!--<li class="nav-item">案例分析</li>-->
      <!--<li class="nav-item">-->
      <!--<nuxt-link to="/job">人才招聘</nuxt-link>-->
      <!--</li>-->
      <!--<li class="nav-item">关于我们</li>-->
      <!--</ul>-->
      <div class="nav">
        <div class="nav-item" v-for="(index,key) in list" @mouseenter="jump(key)" @mouseleave="close">
          <div class="span" :class="{'big':key === key2}" @click="handClick(index.title)">{{index.title}}</div>
          <div class="nav_item_list active" :class="{'show':key==key2}">
            <ul>
              <li v-for="(item,i) in index.arr" data-type="item" @click="handClickChild(item)">{{item}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
  export default {
    data() {
      return {
        list: [{title: "首页"},
          {title: "平台服务", arr: ["金融服务", "城配服务", "租赁服务", "售后服务"]},
          {title: "我的业务",},
          {title: "案例分析",},
          {title: "人才招聘",},
          {title: "关于我们", arr: ["平台定位", "联系我们"]}],
        //控制下拉弹框
        key2: "999"
      }
    },
    watch: {
      $route(to, from) {

        console.log(to.name);
        if (to.name == "index"){
            this.key2 === 0;


        }
      }
    },
    methods: {
      goToHomePage() {
        this.$router.push('/')

      },
      //路由跳转
      handClick(data) {
        switch (data) {
          case "首页":
            this.$router.push('/');
            this.key2 = 0;
            break;
          case "平台服务":
            this.key2 = 1;
            break;
          case "我的业务":
            this.key2 = 2;
            this.$router.push('/business');
            break;
          case "案例分析":
            this.$router.push('/case');
            this.key2 = 3;
            break;
          case "人才招聘":
            this.$router.push('/job');
            this.key2 = 4;
            break;
          case "关于我们":
            this.key2 = 5;
            break;

        }
      },
      handClickChild(data) {
        switch (data) {
          case "金融服务":
            this.$router.push('/service');
            this.key2 = 999;
            break;
          case "城配服务":
            this.$router.push('/service/dispatch');
            this.key2 = 999;
            break;
          case "租赁服务":
            this.$router.push('/service/rent');
            this.key2 = 999;
            break;
          case "售后服务":
            this.$router.push('/service/sale');
            this.key2 = 999;
            break;
          case "平台定位":
            this.$router.push('/about');
            this.key2 = 999;
            break;
          case "联系我们":
            this.$router.push('/about/contact');
            this.key2 = 999;
            break;

        }
      },
      //鼠标进入打开下拉选择框
      jump(key) {
        this.key2 = key;
      },
      //关闭下拉选择框
      close() {
        this.key2 = 999;
      }
    }
  }
</script>

<style lang="scss" scoped>
  header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #FF8A01;
    height: 60px;
    .header-container {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      overflow: hidden;

      .logo {
        float: left;
        line-height: 60px;
        color: #ffffff;
        cursor: pointer;
        .logo--h1 {
          display: inline-block;
          font-size: 26px;
        }
        .logo--h4 {
          display: inline-block;
          font-size: 12px;
        }
      }

      /*.nav {*/
      /*float: right;*/
      /*height: 100%;*/
      /*font-size: 0;*/
      /*.nav-item {*/
      /*display: inline-block;*/
      /*font-size: 12px;*/
      /*color: #ffffff;*/
      /*position: relative;*/
      /*top: 32px;*/
      /*margin-left: 15px;*/
      /*cursor: pointer;*/
      /*a {*/
      /*color: #ffffff;*/
      /*}*/
      /*}*/
      /*}*/
      .nav {
        position: absolute;
        height: 100%;
        right: 17px;
        padding-top: 32px;
        z-index: 100;
        .nav-item {
          vertical-align: top;
          display: inline-block;
          font-size: 12px;
          width: 82px;
          color: #fff;
          text-align: center;
          .span {
            display: inline-block;
            margin-bottom: 8px;
            cursor: pointer;
          }
          .big {
            font-size: 14px;
          }
          .active {
            display: none;

          }
          .show {
            display: block;
          }
          .nav_item_list {
            background: #FF8A01;
            color: #fff;
            border: 1px solid #ff8A01;
            border-radius: 5px;
            z-index: 100;
            li {
              margin: 13px 5px;
              cursor: pointer;

            }

          }
        }
      }
    }

  }
</style>
